<template>
  <div class="commonBoxmp">
    <TableV2
      class="flex1"
      ref="tableV2Ref"
      :apiFunction="listConfig"
      selection
      :columns="state.columnData"
    >
      <template #tableHeader>
        <div class="jcb aic w100">
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
      </template>
      <template #operation>
        <el-table-column label="操作" fixed="right" width="160px" align="left">
          <template #default="scope">
            <el-link type="primary" @click="handleUpdate(scope.row)"
              >修改</el-link
            >
            <el-link type="primary" @click="handleDelete(scope.row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </template>
    </TableV2>

    <el-dialog
      v-model="state.userVisible"
      :title="state.title"
      width="50%"
      destroy-on-close
      center
    >
      <el-form
        ref="ruleFormRef"
        :model="state.form"
        :rules="state.rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="参数名称" prop="configName">
              <el-input
                v-model="state.form.configName"
                placeholder="请输入参数名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数键名" prop="configKey">
              <el-input
                v-model="state.form.configKey"
                placeholder="请输入参数键名"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="参数键值" prop="configValue">
              <el-input
                v-model="state.form.configValue"
                placeholder="请输入参数键值"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系统内置" prop="configType">
              <selectDict
                class="w100"
                dictCode="sys_yes_no"
                v-model="state.form.configType"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="state.form.remark"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.userVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import Column from "/@ts/components/table/Column";
import selectDict from "/@/components/selectDict/index.vue";
import DictTag from "/@/components/DictTag/index.vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import {
  listConfig,
  getConfig,
  delConfig,
  addConfig,
  updateConfig,
  refreshCache,
} from "/@ts/axios/urlApi/system/config";
import formatTool from "/@ts/hooks/format";
import { routerPush } from "/@ts/hooks/route";
const router = useRouter();
const route = useRoute();
const { parseTime, addDateRange, getDict } = formatTool();

const state: any = reactive({
  // 表格基础配置 start
  form: {},
  title: "",
  rules: {
    configName: [
      { required: true, message: "参数名称不能为空", trigger: "blur" },
    ],
    configKey: [
      { required: true, message: "参数键名不能为空", trigger: "blur" },
    ],
    configValue: [
      { required: true, message: "参数键值不能为空", trigger: "blur" },
    ],
  },
  dateRange: [], //时间范围筛选

  height: 0,
  tableData: [],
  columnData: [
    {
      label: "参数主键",
      prop: "configId",
      visible: true,
    },
    {
      label: "参数名称",
      prop: "configName",
      visible: true,
    },
    {
      label: "参数键名",
      prop: "configKey",
      visible: true,
    },
    {
      label: "参数键值",
      prop: "configValue",
      visible: true,
    },
    {
      label: "系统内置",
      prop: "configType",
      visible: true,
      render: ({ row }: any) => {
        return (
          <DictTag
            values={row.configType}
            dataType="primary"
            options={dict.sys_yes_no}
          ></DictTag>
        );
      },
    },
    {
      label: "备注",
      visible: true,
      prop: "remark",
    },
    {
      label: "创建时间",
      prop: "createTime",
      visible: true,
    },
  ],
  loading: false,
  // 表格基础配置 end
});
// 表格基础配置 start
const pageInfo = reactive<PageInfoConfig>({
  currentPage: 1,
  total: 10,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40],
  layout: "total, prev, pager, next,sizes",
});
const queryParams: any = reactive({
  pageNum: 1,
  pageSize: 10,
  deptId: undefined,
});
const getCurrentColumns = (data: Column[]) => {
  state.columnData = data;
};
const getHeight = (height: number) => {
  state.height = height;
};
const handleSizeChange = (size: number) => {
  pageInfo.pageSize = size;
  getList();
};
const handleCurrentChange = (page: number) => {
  pageInfo.currentPage = page;
  getList();
};
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate();
  if (state.form.configId != undefined) {
    updateConfig(state.form).then((response: ResponseConfig) => {
      ElMessage.success("修改成功");
      state.userVisible = false;
      getList();
    });
  } else {
    addConfig(state.form).then((response: ResponseConfig) => {
      ElMessage.success("新增成功");
      state.userVisible = false;
      getList();
    });
  }
};
const handleDelete = (row: any) => {
  const configId = row.configId;
  ElMessageBox.confirm('是否确认删除编号为"' + configId + '"的数据项？')
    .then(function () {
      return delConfig(configId);
    })
    .then(() => {
      ElMessage.success("删除成功");
      getList();
    })
    .catch(function () {});
};
/** 修改按钮操作 */
const handleUpdate = (row: any) => {
  const configId = row.configId;
  getConfig(configId).then((response: ResponseConfig) => {
    state.title = "修改岗位";
    state.form = response.data;
    state.userVisible = true;
  });
};
const handleAdd = () => {
  state.form = {};
  state.title = "添加岗位";
  state.userVisible = true;
};
// 表格基础配置 end
//查询用户列表
const tableV2Ref = ref()
const getList = () => {
    tableV2Ref.value.getList()
  // state.loading = true;
  // queryParams.pageNum = pageInfo.currentPage;
  // queryParams.pageSize = pageInfo.pageSize;
  // listConfig(addDateRange(queryParams, state.dateRange)).then(
  //   (response: any) => {
  //     state.tableData = response.rows;
  //     pageInfo.total = response.total;
  //     state.loading = false;
  //   },
  // );
};
const handleDetail = (configId: any) => {
  routerPush({
    path: "/system/dict-data/index/" + configId,
  });
};
let dict: any = reactive({
  sys_yes_no: [],
});
const ruleFormRef = ref<FormInstance>();
onMounted(async () => {
  dict.sys_yes_no = await getDict("sys_yes_no");
});
</script>

<style scoped lang="scss"></style>
